<template>
  <div 
    v-if="show" 
    class="modal" 
    @click="handleModalClick"
  >
    <div class="modal-content" :style="modalContentStyle">
      <div class="modal-header">
        <h3 class="modal-title">通用规则检验</h3>
        <button class="close-modal" @click="closeModal">&times;</button>
      </div>
      
      <div class="modal-body">
        <!-- 文档信息 -->
        <div class="form-section">
          <h3 class="section-title-small">
            <i class="fas fa-file-upload"></i>文档信息
          </h3>
          
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label required">上传文件</label>
              <FileUpload 
                v-model="selectedFile"
                accept=".docx"
                :max-size="50"
                description="仅支持上传单个docx格式文件"
              />
            </div>
            
            <div class="form-group">
              <label class="form-label required">文件类型</label>
              <div class="select-wrapper">
                <select v-model="fileType">
                  <option value="">请选择文件类型</option>
                  <option value="procurement">采购文件</option>
                  <option value="contract">合同文件</option>
                  <option value="report">报告文件</option>
                  <option value="other">其他文件</option>
                </select>
              </div>
              
              <label class="form-label required" style="margin-top: 1.5rem;">采购方式</label>
              <div class="select-wrapper">
                <select v-model="procurementMethod">
                  <option value="">请选择采购方式</option>
                  <option value="open">公开招标</option>
                  <option value="invite">邀请招标</option>
                  <option value="negotiation">竞争性谈判</option>
                  <option value="inquiry">询价</option>
                  <option value="single">单一来源</option>
                </select>
              </div>
              
              <label class="form-label" style="margin-top: 1.5rem;">自定义规则集</label>
              <div class="select-wrapper">
                <select v-model="customRuleSet" :disabled="loadingRules">
                  <option value="">请选择规则集（可选）</option>
                  <template v-if="!loadingRules">
                    <option 
                      v-for="rule in rules" 
                      :key="rule.id" 
                      :value="rule.id"
                    >
                      {{ rule.ruleFileName }}
                    </option>
                  </template>
                </select>
                <div v-if="loadingRules" class="loading-text">
                  <i class="fas fa-spinner fa-spin"></i> 加载规则集中...
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 采购包信息 -->
        <div class="form-section">
          <h3 class="section-title-small">
            <i class="fas fa-box-open"></i>采购包信息
          </h3>
          
          <div id="packagesContainer">
            <ProcurementPackage
              v-for="(pkg, index) in packages"
              :key="pkg.id"
              :package-data="pkg"
              :package-number="index + 1"
              :show-remove="packages.length > 1"
              @remove="removePackage(index)"
              @update="updatePackage(index, $event)"
            />
          </div>
          
          <button class="add-package" @click="addPackage">
            <i class="fas fa-plus"></i>添加采购包
          </button>
        </div>
        
        <!-- 检验结果 -->
        <div class="inspection-results">
          <h3 class="section-title-small">
            <i class="fas fa-clipboard-check"></i>检验结果
          </h3>
          
          <div class="result-tabs">
            <button 
              v-for="tab in tabs"
              :key="tab.id"
              :class="['tab-btn', { active: activeTab === tab.id }]"
              @click="activeTab = tab.id"
            >
              {{ tab.name }}
            </button>
          </div>
          
          <!-- 检验记录 -->
          <div v-if="activeTab === 'records'" class="tab-content active">
            <InspectionRecords 
              :records="records"
              :loading="recordsLoading"
              :error="recordsError"
            />
          </div>
          
          <!-- 标注表 -->
          <div v-if="activeTab === 'annotations'" class="tab-content active">
            <AnnotationTable />
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button class="btn-secondary" @click="closeModal">取消</button>
        <button 
          class="btn-primary" 
          @click="startInspection"
          :disabled="inspecting"
        >
          <template v-if="!inspecting">
            开始检验
          </template>
          <template v-else>
            <i class="fas fa-spinner fa-spin"></i> 检验中...
          </template>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import FileUpload from './FileUpload.vue'
import ProcurementPackage from './ProcurementPackage.vue'
import InspectionRecords from './InspectionRecords.vue'
import { useInspectionRecords } from '../scripts/inspectionRecords'
import { useInspectionModal } from '../scripts/inspectionModal'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
}>()

const { 
  records, 
  loading: recordsLoading, 
  error: recordsError,
  fetchRecords 
} = useInspectionRecords()

const {
  modalContentStyle,
  selectedFile,
  fileType,
  procurementMethod,
  customRuleSet,
  rules,
  loadingRules,
  packages,
  activeTab,
  tabs,
  inspecting,
  closeModal,
  handleModalClick,
  addPackage,
  removePackage,
  updatePackage,
  startInspection
} = useInspectionModal(props, emit, fetchRecords)
</script>

<style scoped>
.loading-text {
  padding: 8px 0;
  color: #666;
  font-size: 14px;
  text-align: center;
}

.select-wrapper {
  position: relative;
  min-height: 40px;
}

.fa-spinner {
  margin-right: 8px;
}
</style>